{% extends "layout.html" %}
{% load static %}

{% block css_m %}

{% endblock %}
{% block js_m %}


{% endblock %}

{% block content_body %}

    <div class="container center-block">
        <div class="panel panel-warning" style="margin-top: 200px">
            <div class="panel-heading">客户进店次数排名</div>
            <div class="panel-body">
                <div id="custom_test" style="width: 100%;height:500px;"></div>
            </div>
        </div>
        <div class="panel panel-warning" style="margin-top: 200px">
            <div class="panel-heading">客户花费排名</div>
            <div class="panel-body">
                <div id="main" style="width: 100%;height:500px;"></div>
            </div>
        </div>


    </div>





{% endblock %}

{% block content_bottom %}
    <script type="text/javascript" src="{% static '/js/highcharts.js' %}"></script>
    <script type="text/javascript">
        Highcharts.setOptions(
            {
                global: {
                    useUTC: false
                }
            }
        );
        $(function () {
            initChart();
        })


        function initChart() {


            // 指定图表的配置项和数据

            var config = {
                chart: {type: "bar"},
                title: {
                    text: null
                },

                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                yAxis: {
                    title: {
                        text: '总花费（元）'
                    }
                },
                xAxis: {

                    type: 'category'


                },

                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span>总花费：{point.y}元',


                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    },
                    bar: {
                        dataLabels: {
                            useHTML: true,
                            enabled: true,

                            format: '<b>{point.y}元</b>',

                        }
                    }
                },
                series: [{
                    data: [],

                    zones: [{
                        value: 500,
                        color: '#7cb5ec',
                        dashStyle: 'dot'
                    }, {
                        value: 1000,
                        color: '#90ed7d'
                    }, {
                        color: '#f7a35c'
                    }]
                }
                ]
            };
            var configTest = {
                chart: {type: "bar"},
                title: {
                    text: null
                },

                legend: {
                    reversed: true
                },
                credits: {
                    enabled: false
                },
                yAxis: {
                    title: {
                        text: '总进店次数'
                    },
                    stackLabels: {
                        enabled: true,
                        allowOverlap: true,
                        style: {
                            fontWeight: 'bold',

                            color: '#a0522d'// (Highcharts.theme &&
                            // Highcharts.theme.textColor) ||
                        },
                        formatter: function () {
                            if (this.total === 0) {
                                return "";
                            } else {
                                return "总计" + this.total + "次";
                            }
                        }
                    }
                },
                xAxis: {

                    categories: []


                },


                plotOptions: {

                    bar: {
                        dataLabels: {

                            enabled: true,


                        },

                    },
                    series: {
                        stacking: 'normal'
                    },

                },
                series: [],


            };


            $.ajax({
                    url: '{% url "chart_total_amount_p_c" %}',
                    type: 'get',

                    dataType: 'JSON',
                    success: function (arg) {

                        config.series[0].data = arg.result
                        configTest.series = arg.series
                        configTest.xAxis.categories = arg.category

                        $("#main").highcharts(config)
                        $("#custom_test").highcharts(configTest)


                    }

                }
            );
        }
    </script>
{% endblock %}